<template>
  <div class="welcome-container">
    <el-row :gutter="20">
      <!-- 库存统计数据卡片 -->
      <el-col :span="24">
        <el-card v-loading="loading">
          <template #header>
            <div class="card-header">
              <h3>库存数据统计</h3>
              <el-button :icon="Refresh" circle @click="fetchInventoryStats" />
            </div>
          </template>
          <el-row :gutter="20" class="stats-row">
            <el-col :span="8">
              <el-card shadow="hover" class="stats-card">
                <template #header>物品与仓库</template>
                <div class="stats-content">
                  <div class="stats-item">
                    <span>物品种类：</span>
                    <span class="stats-value">{{ stats.totalItems }}</span>
                  </div>
                  <div class="stats-item">
                    <span>仓库数量：</span>
                    <span class="stats-value">{{ stats.totalWarehouses }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="stats-card">
                <template #header>库存情况</template>
                <div class="stats-content">
                  <div class="stats-item">
                    <span>总库存量：</span>
                    <span class="stats-value">{{ stats.totalQuantity }}</span>
                  </div>
                  <div class="stats-item">
                    <span>总价值：</span>
                    <span class="stats-value">¥{{ formatNumber(stats.totalValue) }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="stats-card">
                <template #header>库存预警</template>
                <div class="stats-content">
                  <div class="stats-item">
                    <span>库存不足：</span>
                    <span class="stats-value warning">{{ stats.lowStockItems }}</span>
                  </div>
                  <div class="stats-item">
                    <span>库存积压：</span>
                    <span class="stats-value info">{{ stats.highStockItems }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 欢迎卡片 -->
      <el-col :span="24" class="mt-20">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <h3>欢迎使用仓库管理系统</h3>
            </div>
          </template>
          <div class="welcome-content">
            <p>这是一个功能完整的仓库管理系统，您可以：</p>
            <ul>
              <li>管理用户账户和权限</li>
              <li>管理仓库信息</li>
              <li>管理物品分类</li>
              <li>处理物品的入库和出库</li>
              <li>查询实时库存状态</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 快捷功能卡片 -->
      <el-col :span="6">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><icon-user /></el-icon>
              <span>用户管理</span>
            </div>
          </template>
          <el-button type="primary" @click="$router.push('/user/list')">查看用户列表</el-button>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><icon-box /></el-icon>
              <span>仓库管理</span>
            </div>
          </template>
          <el-button type="primary" @click="$router.push('/warehouse/list')">查看仓库列表</el-button>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><icon-goods /></el-icon>
              <span>入库管理</span>
            </div>
          </template>
          <el-button type="primary" @click="$router.push('/stock/in')">物品入库</el-button>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><icon-goods /></el-icon>
              <span>出库管理</span>
            </div>
          </template>
          <el-button type="primary" @click="$router.push('/stock/out')">物品出库</el-button>
        </el-card>
      </el-col>

      <!-- <el-col :span="7">
        <el-card class="function-card">
          <template #header>
            <div class="card-header">
              <el-icon><icon-goods /></el-icon>
              <span>物品列表</span>
            </div>
          </template>
          <el-button type="primary" @click="$router.push('/item/list')">物品列表</el-button>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  User as IconUser,
  Box as IconBox,
  Goods as IconGoods,
  Refresh
} from '@element-plus/icons-vue'
import { getInventoryStats } from '@/api/inventory'
import type { InventoryStats } from '@/api/inventory'

const loading = ref(false)
const stats = ref<InventoryStats>({
  totalItems: 0,
  totalWarehouses: 0,
  totalQuantity: 0,
  totalValue: 0,
  lowStockItems: 0,
  highStockItems: 0
})

// 格式化数字
const formatNumber = (num: number) => {
  return num.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 获取库存统计数据
const fetchInventoryStats = async () => {
  loading.value = true
  try {
    const res = await getInventoryStats()
    stats.value = res.data
  } catch (error) {
    ElMessage.error('获取库存统计数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchInventoryStats()
})
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 100%;
}

.stats-content {
  padding: 10px;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stats-value {
  font-weight: bold;
  font-size: 16px;
}

.stats-value.warning {
  color: var(--el-color-danger);
}

.stats-value.info {
  color: var(--el-color-warning);
}

.mt-20 {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-content {
  font-size: 16px;
  line-height: 1.6;
}

.welcome-content ul {
  margin-top: 10px;
  padding-left: 20px;
}

.function-card {
  text-align: center;
}

.function-card .el-button {
  width: 100%;
  margin-top: 10px;
}

.card-header h3 {
  margin: 0;
  color: #303133;
}
</style>